<%@page contentType="text/html;" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>注册用户</title>
    <%@include file="common/headers.jsp" %>
    <link rel="stylesheet" href="static/bootstrapValidator/css/bootstrapValidator.css"/>
    <script type="text/javascript" src="static/bootstrapValidator/js/bootstrapValidator.js"></script>
    
    <!--toastr插件地址-->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        toastr.options = {
            "closeButton": true, //是否显示关闭按钮
            "debug": false, //是否使用debug模式
            "positionClass": "toast-bottom-right",//弹出窗的位置
            "showDuration": "300",//显示的动画时间
            "hideDuration": "1000",//消失的动画时间
            "timeOut": 0, //展现时间，一直存在
            "extendedTimeOut": "1000",//加长展示时间
            "showEasing": "swing",//显示时的动画缓冲方式
            "hideEasing": "linear",//消失时的动画缓冲方式
            "showMethod": "fadeIn",//显示时的动画方式
            "hideMethod": "fadeOut" //消失时的动画方式
        };
       
    </script>

    <script>
        $(function(){
            $('[name="pic"]').change(function(event){
                /*
                * event:事件源，触发js时间的对象
                * event.target：触发当前事件的对象
                * */
                //console.log(event.target.files[0]);

                $(".btn-pic").text(event.target.value)
            });
        })
    </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- form: -->
            <section>
                <div class="page-header">
                    <h1>注册用户</h1>
                </div>

                <div class="col-lg-8 col-lg-offset-2">
                    <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
                        <div class="form-group">
                            <label class="col-lg-3 control-label">账户</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="account" autocomplete="off" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">昵称</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="nickName" autocomplete="off" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">密码</label>
                            <div class="col-lg-5">
                                <input type="password" class="form-control" name="password" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">确认密码</label>
                            <div class="col-lg-5">
                                <input type="password" class="form-control" name="confirmPassword" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">性别</label>
                            <div class="col-lg-5">
                                <div class="radio-inline">
                                    <label>
                                        <input type="radio" name="gender" value="1" data-bv-field="gender"> 男
                                    </label>
                                </div>
                                <div class="radio-inline">
                                    <label>
                                        <input type="radio" name="gender" value="2" data-bv-field="gender"> 女
                                    </label>
                                </div>

                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">头像</label>
                            <div class="col-lg-5">
                                <input type="file" class="form-control" style="opacity: 0" name="pic" data-bv-field="firstFile">
                                <button style="position: absolute;left: 15px;top: 0px;z-index: -1;" class="btn btn-pic btn-primary">上传头像</button>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-lg-9 col-lg-offset-3">
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-offset-3 col-lg-4">
                                <a href="login.jsp">登录</a>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
            <!-- :form -->
        </div>
    </div>

<script type="text/javascript">
$(document).ready(function() {
    $('#defaultForm').bootstrapValidator({
        message: 'This value is not valid',
//        live: 'disabled',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            account: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: { //非空验证
                        message: '用户名不能为空'
                    },
                    stringLength: {//匹配字符串长度
                        min: 4,  //至少4个字符
                        max: 15, //最多15个字符
                        message: '用户名长度为4-15个字符'
                    },
                    regexp: { //用户名的匹配正则表达式
                        regexp: /^[a-zA-Z0-9]+$/, //正则表达式规则
                        message: '用户名由大小写字母、数字组成'
                    },
                    remote: {//输入用户名以后，bootstrap-validator会自动发送ajax向服务器验证这个用户名是否存在
                        //服务器响应的数据必须是一个json对象； {valid:true},  valid:true验证通过，valid:false验证不通过
                        type: 'POST',
                        url: 'validateAccount',
                        message: '该账户已经被注册',
                        delay: 1000
                    },
                    different: { //用户名不能和密码相同
                        field: 'password',
                        message: '用户名不能和密码相同'
                    },

                }
            },
            nickName:{
                validators:{
                    notEmpty:{
                        message:'昵称不能为空'
                    },
                    stringLength: {//匹配字符串长度
                        min: 2,  //至少2个字符
                        max: 7, //最多7个字符
                        message: '用户名长度为2-7个字符'
                    },
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '密码不能为空'
                    },
                    identical: { //和确认密码绑定
                        field: 'confirmPassword',
                        message: '密码和确认密码必须相同'
                    },
                    different: {
                        field: 'username',
                        message: '密码不能用户名相同'
                    }
                }
            },
            confirmPassword: {
                validators: {
                    notEmpty: {
                        message: '确认密码不能为空'
                    },
                    identical: {
                        field: 'password',//和密码框绑定
                        message: '确认密码必须和密码相同'
                    }
                }
            }
            
        }
    }).on('success.form.bv',function(e){
        e.preventDefault(); //阻止表单的默认行为

        //得到表单数据对象
        var formData = new FormData();
        //将表单的其他属性值appen到formData对象中
        formData.append("account", $("[name='account']").val());
        var nickName = $("[name='nickName']").val();
        //url encode转码
        nickName = encodeURI(nickName);
        formData.append("nickName", nickName);
        formData.append("password", $("[name='password']").val());
        formData.append("gender", $("[name='gender']:checked").val());
        formData.append("pic", $("[name='pic']")[0].files[0]);


        //向服务器发送ajax请求，注册用户
        $.ajax({
            url: "doRegister",
            dataType:'json',
            type:'POST',
            async: false,
            data: formData,
            processData : false, // 使数据不做处理
            contentType : false, // 不要设置Content-Type请求头
            timeOut:60000, //设置ajax超时时间
            success: function(response){
                console.log(response);
                if(response.code == 200){
                    toastr.success('注册成功')
                } else {
                    toastr.error(response.message)
                }
            },
            error:function(response){
                console.log(response);
            }
        });
    });
});
</script>
</body>
</html>
